<template>
    <y-layout title="CheckList">

        <div style="padding-left:12px;margin-bottom: 10px;" class="demo-small-pitch">
            <y-checkbox v-model="isCheckAll" shape="circle" :change="checkAll">全选 {{isCheckAll}} - <span style="font-size: 12px;">结合yd-checkbox组件实现全选</span></y-checkbox>
        </div>
        <y-checklist v-model="checklist1" ref="checklistDemo" :callback="change">
            <y-checklist-item val="1">
                <div style="height: 50px;line-height: 50px;">1 -- 值：{{checklist1}}</div>
            </y-checklist-item>
            <y-checklist-item val="2">
                <div style="height: 50px;line-height: 50px;">2</div>
            </y-checklist-item>
            <y-checklist-item val="3">
                <div style="height: 50px;line-height: 50px;">3</div>
            </y-checklist-item>
        </y-checklist>

        <y-checklist v-model="checklist2" class="demo-small-pitch" :label="false" :callback="fn">
            <y-checklist-item val="aaa" :change="handleChange">
                <y-flexbox style="padding: 15px 0;">
                    <img src="//img12.360buyimg.com/n1/jfs/t2122/170/1006550413/171711/de099a6f/56399d01N67907749.jpg" class="demo-checklist-img">
                    <y-flexbox-item align="top">
                        [aaa] 类似购物车 / 类似购物车<br/>
                        <span style="color: blue;">点击这边的内容是禁止选中的</span><br/>
                        <p style="color:#F00;">选中值：{{checklist2}}</p>
                    </y-flexbox-item>
                </y-flexbox>
            </y-checklist-item>
            <y-checklist-item val="bbb" :change="handleChange">
                <y-flexbox style="padding: 15px 0;">
                    <img src="//img10.360buyimg.com/n1/jfs/t6925/75/2382158459/437865/f3931d24/598be5b1N24d949fe.jpg" class="demo-checklist-img">
                    <y-flexbox-item align="top">
                        [bbb] 南非进口红西柚 6个 单果重约300-330g 新鲜水果
                    </y-flexbox-item>
                </y-flexbox>
            </y-checklist-item>
            <y-checklist-item val="ccc" :change="handleChange">
                <y-flexbox style="padding: 15px 0;">
                    <img src="//img14.360buyimg.com/n1/jfs/t3232/69/539717695/176729/cf1ff3d8/57baa5d1N901ffea5.jpg" class="demo-checklist-img">
                    <y-flexbox-item align="top">
                        [ccc] 展卉 越南进口红心火龙果 3个装中果 单果约300~350g 新鲜水果
                    </y-flexbox-item>
                </y-flexbox>
            </y-checklist-item>
        </y-checklist>

    </y-layout>
</template>

<script type="text/babel">
    export default {
        data() {
            return {
                checklist1: [1],
                checklist2: [],
                isCheckAll: false
            }
        },
        methods: {
            fn(val, isCheckAll) {
                console.log('来自 y-checklist 的回调：是否全选：' + isCheckAll, '当前所选值是：' + JSON.stringify(val));
            },
            handleChange(val, isCheck) {
                console.log('来自 y-checklist-item 的回调：是否选中：' + isCheck, '值是：' + JSON.stringify(val));
            },
            change(value, isCheckAll) {
                this.isCheckAll = isCheckAll;
            },
            checkAll() {
                this.isCheckAll = !this.isCheckAll;
                this.$refs.checklistDemo.$emit('ydui.checklist.checkall', this.isCheckAll);
            }
        }
    }
</script>
